<template>
  <div>
    <!-- Breadcrumb 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/categories' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="15">
          <el-button
            type="primary"
            icon="el-icon-check"
            @click="setCateDialogVisible = true"
            >添加分类</el-button
          >
        </el-col>
      </el-row>
      <!-- 分类表格 -->
      <el-table border :data="cateList" style="width: 100%">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="cat_name" label="分类名称"></el-table-column>
        <el-table-column prop="cat_deleted"  label="是否有效" ><i class="el-icon-success"></i></el-table-column>
        <el-table-column prop="cat_level" label="排序">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.cat_level == '0'
                  ? ''
                  : scope.row.cat_level == '1'
                  ? 'danger'
                  : 'success'
              "
              disable-transitions
              >{{
                scope.row.cat_level == "0"
                  ? "一级"
                  : scope.row.cat_level == "1"
                  ? "二级"
                  : "三级"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini"
              >编辑</el-button
            >
            <!-- 删除按钮 -->
            <el-tooltip
              effect="dark"
              content="删除"
              placement="top"
              :enterable="false"
            >
              <el-button type="danger" icon="el-icon-delete" size="mini"
                >删除</el-button
              >
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- Pagination分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=" queryCate.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryCate.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="cateList.length"
      >
      </el-pagination>
    </el-card>
    <!-- 添加分类的对话框 -->
    <el-dialog title="添加分类"  :visible.sync="setCateDialogVisible">
      <!-- 表单 -->
      <el-form>
        <el-row>
          <el-col
            ><el-form-item label="分类名称"> <el-input></el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-form-item label="父级分类">
          <el-select v-model="cat_id" placeholder="请选择分类">
            <el-option v-for="item in cateList" :key="item.cat_id"
      :label="item.cat_name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="allotRights">确 定</el-button>
      </span>
    </el-dialog>
  

  </div>
</template>

<script>
export default {
  data() {
    return {
      
      cateList: [],
      queryCate: {
        type:[1],  
        pagenum:1,
        pagesize:5,
      },
      //默认弹窗关闭
      setCateDialogVisible: false,
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    async getCateList() {
      const { data: res } = await this.$http.get(`categories`, 
      );
      if (res.meta.status !== 200) {
        return this.$message.error("获取信息失败");
      }
      this.cateList = res.data;
      console.log("cateList是" + this.cateList);
    },
    
  },
};
</script>

<style lang="less" scoped>

</style>
